import BaseComponent from "../../app/baseComponent";
import { createSubpageComponent } from "../page.component";

class UiExampleGrid extends BaseComponent {
    constructor(name) {
        super(name);
    }
    _template() {
        var self = this;
        return `<div class="${self._name}">
<div class="aui-layout aui-layout-grid">
    <div class="aui-layout__item aui-col-xs-12">
        <h5>basic 最基础的grid</h5>
        <hr better/>
    </div>
</div>
<div class="aui-easy-grid">
    <div class="aui-layout aui-layout-grid">
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-3">col-xs-12 col-md-6 col-lg-3</div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-3">col-xs-12 col-md-6 col-lg-3</div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-3">col-xs-12 col-md-6 col-lg-3</div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-3">col-xs-12 col-md-6 col-lg-3</div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-3">col-xs-12 col-md-6 col-lg-3</div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-3">col-xs-12 col-md-6 col-lg-3</div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-3">col-xs-12 col-md-6 col-lg-3</div>
    </div>
</div>

<div class="aui-layout aui-layout-grid">
<div class="aui-layout__item aui-col-xs-12">
    <h5>auto 移动端全部 pc端auto</h5>
    <hr better/>
</div>
</div>
<div class="aui-easy-grid">
<div class="aui-layout aui-layout-grid">
    <div class="aui-layout__item aui-col-xs-12 aui-col-md-auto">aui-col-xs-12 aui-col-md-auto</div>
    <div class="aui-layout__item aui-col-xs-12 aui-col-md-auto">aui-col-xs-12 aui-col-md-auto</div>
    <div class="aui-layout__item aui-col-xs-12 aui-col-md-auto">aui-col-xs-12 aui-col-md-auto</div>
    <div class="aui-layout__item aui-col-xs-12 aui-col-md-auto">aui-col-xs-12 aui-col-md-auto</div>
    <div class="aui-layout__item aui-col-xs-12 aui-col-md-auto">aui-col-xs-12 aui-col-md-auto</div>
    <div class="aui-layout__item aui-col-xs-12 aui-col-md-auto">aui-col-xs-12 aui-col-md-auto</div>
    <div class="aui-layout__item aui-col-xs-12 aui-col-md-auto">aui-col-xs-12 aui-col-md-auto</div>
</div>
</div>

<div class="aui-layout aui-layout-grid">
    <div class="aui-layout__item aui-col-xs-12">
        <h5>none 什么也不设置</h5>
        <hr better/>
    </div>
</div>
<div class="aui-easy-grid">
    <div class="aui-layout aui-layout-grid">
        <div class="aui-layout__item">none 什么也不设置</div>
        <div class="aui-layout__item">none 什么也不设置</div>
        <div class="aui-layout__item">none 什么也不设置</div>
        <div class="aui-layout__item">none 什么也不设置</div>
        <div class="aui-layout__item">none 什么也不设置</div>
        <div class="aui-layout__item">none 什么也不设置</div>
        <div class="aui-layout__item">none 什么也不设置</div>
    </div>
</div>

<div class="aui-layout aui-layout-grid">
<div class="aui-layout__item aui-col-xs-12">
    <h5>没有gutter</h5>
    <hr better/>
</div>
</div>
<div class="aui-easy-grid aui-easy-grid--nogutter">
    <div class="aui-layout aui-layout-grid">
        <div class="aui-layout__item">没有gutter</div>
        <div class="aui-layout__item">没有gutter</div>
        <div class="aui-layout__item">没有gutter</div>
        <div class="aui-layout__item">没有gutter</div>
        <div class="aui-layout__item">没有gutter</div>
        <div class="aui-layout__item">没有gutter</div>
        <div class="aui-layout__item">没有gutter</div>
    </div>
</div>
</div>`;
    }
    _mounted() {
        var self = this;
    }
    _data() {
        var ret = {};
        return ret;
    }
}

window.AUICustomComponents.define("ui-example-grid", UiExampleGrid);

export default createSubpageComponent(
    `<ui-example-grid></ui-example-grid>`
);